<template>
	<view class="member-card" :class="{advanced: type === 2}" @click="toMemberInfoPage(account)">
		<!-- 有遮罩 -->
		<view v-if="type!==2" class="with-modal">
			<img class="member-avatar" :src="avatarUrl" alt="avatar" />
			<view class="member-info">
				<p class="member-name">{{ name }}</p>
				<p class="member-tel">联系电话: <span>{{ tel }}</span></p>
			</view>
			<i class="fa fa-angle-right" style="font-size: 24px; line-height: 80px;"></i>
		</view>

		<!-- 无遮罩 -->
		<view v-else class="no-modal">
			<img class="member-avatar" :src="avatarUrl" alt="avatar" />
			<view class="member-info">
				<p class="member-name">{{ name }}</p>
				<p class="member-tel" v-show="tel">联系电话: <span>{{ tel }}</span></p>
			</view>
			<i class="fa fa-angle-right" style="font-size: 24px; line-height: 80px;"></i>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MemberCard",
		props: {
			account: {
				type: String,
				default: "asadd12135"
			},
			name: {
				type: String,
				default: "张三"
			},
			type: {
				type: Number,
				default: 0
			},
			tel: {
				type: String,
				default: null
			},
			avatarUrl: {
				type: String,
				default: "/static/logo_company.png"
			}
		},

		data() {
			return {

			};
		},

		methods: {
			toMemberInfoPage(account) {
				uni.navigateTo({
					url: `/pages/memberInfo/memberInfo?account=${account}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.member-card {
		border-radius: 8px;
		background-color: #fff;
		color: #FFF;
		text-shadow: 0px 0px 4px #000;
		border-bottom: 1px dashed #EEE;
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
		background-image: linear-gradient(to bottom right, #666666, #f5f5f5, #eeeeee, #333333, #eeeeee); // 渐变
	}

	.advanced {
		border: none;
		text-shadow: 0px 0px 4px #8c4f13;
		background-image: linear-gradient(to bottom right, #F4CE98, #FFFBC7, #FBB03B, #EDD181, #FFFBC7); // 渐变
	}

	.with-modal,
	.no-modal {
		display: flex;
		padding: 16px;
		border-radius: 8px;
	}

	.with-modal {
		background-color: rgba(51, 51, 51, 0.4);
	}

	.member-avatar {
		display: block;
		width: 80px;
		height: 80px;
		border-radius: 8px;
	}

	.member-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		padding: 0 12px;
	}

	.member-name {
		font-size: 20px;
	}
</style>